<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--2. 定义vuejs管理区域 使用 vuejs 特有的语法-->
<div id="app">
    <!--插值表达式-->
    <h2>{{ title }}</h2>
    <!--收集数据-->
    <!--2.1 表单数据-->
    <!-- v-model vuejs提供指令-->
    <!--username是需要在 data对象里面初始化，用于接收数据，一般模型变量。data 整体称之为 模型对象-->
    <input type="text" v-model="username">
    <!--2.2 事件业务数据 点击按钮删除某条记录-->
    <!--@click 是vuejs提供的一个指令，可以帮我们做事件的绑定和监听 deleteItem 事件回调函数-->
    <button @click="deleteItem(1)">删除 id = 1</button>
</div>
<div>
    <h3 id="title"></h3>
</div>
</body>
<!--1. 引包-->
<script src="lib/vue.js"></script>
<script type="text/javascript">
    /*3. 实例化 vue对象*/
    /*无DOM操作，数据驱动（双向数据绑定）
    * vuejs 可以管理数据
    * 1. 方向一的变化： 业务数据==>>放置在视图 √（console vuejsDevTools插件）
    * 2. 方向二的变化：  视图数据，收集到业务代码
    * */
    const vm = new Vue({
        el: '#app',
        data: {
            title: 'hi vuejs!',
            username: '',
            id: 0,

        },
        methods: {
            deleteItem(id) {
                /*this 是当前的实例对象 vm。*/
                this.id = id;
                console.log('deleteItem', id);
            }
        }
    })

    console.log(vm, 'vm');

    //传统开发，DOM操作
    let title = 'native title!';
    document.getElementById('title').innerText = title;

</script>

</html>
